/** 
*   情况通报和汇报的详情 容器
*       路由传参 id 情况通报的id
*           role:  'manage', // 角色权限参数 for test（user：上传端, manage: 管理端）
*           comeFrom: 
*                        'TaskTable' // 任务管理列表
*                        'ReportTable' // 任务管理汇报报列表
*                        'DetailReportTable' // 详情的情况通报汇报列表
*                        'TaskReportTable' //整理汇报列表
*  页面布局情况： 
*/ 
<template>
    <div class="detailContaner">
        <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
        <div class="tip" v-if="!($route.query.comeFrom === 'TaskTable')">
            <div class = "tipLeft"></div>
            <div class = "tipTitle" v-text = "'任务信息'"></div>
            <el-button size="mini" type = "text" class = "tipButton" @click = "toggleCards" v-if = "hasReportDetail"><span v-text ="isOpen ? '收起' : '展开'"></span></el-button>
        </div>
        <component 
            :is="item" v-for= "(item, index) in componentsArray" :key = "index" 
            :taskDetail = "taskDetail" 
            :typeOPtions = "typeOPtions"
            :id = "$route.query.id" 
            :reportDetail = "reportDetail" 

            :hasReportDetail = "hasReportDetail" 
            :isOpen = "isOpen"
            @togglecards = "toggleCards"></component>
    </div>
</template>
<script>
export default {
    components: {
        Breadcrumb : () => import('@/components/IncorruptibleArchives/Breadcrumb.vue'),
        taskDetail : () => import('./taskDetail.vue'),
        reportDetail : () => import('./reportDetail.vue'),
        reportTable : () => import('./reportTable.vue'),
    },
    data() {
        return {
            // 面包屑导航数据
            Breadcrumb: [
                { name: "监督举报", link: "" },
                { name: "专项监督", link: "" },
                { name: "任务管理", link: "" },
                { name: "任务详情", link: "" } 
            ],
            componentsArray: [],
            taskDetail: {},
            reportDetail: {},
            hasReportDetail: false,
            isOpen: false,
            typeOPtions:[]
        }
    },
    watch: {
        $route (newRoute) {
            this.$nextTick(() => {
                if (this.$route.query.comeFrom === 'TaskTable') { // 任务管理（管理端）列表
                    this.getSpecialTaskinfo(this.$route.query.id)
                } else if (this.$route.query.comeFrom === 'ReportTable') { //任务管理（上传端）列表
                    this.getSpecialReportinfo(this.$route.query.id)
                } else if (this.$route.query.comeFrom === 'DetailReportTable') { // 任务管理汇报详情列表（上传端）列表
                    this.getTaskDetailReportDetail(this.$route.query.id)
                } else if (this.$route.query.comeFrom === 'TaskReportTable') { // 情况报告列表
                    this.getSuperviseSituationDetail(this.$route.query.id)
                } else {
                    this.$router.go('-1')
                }
            })
        }
    },
    props: {

    },
    created(){
        console.log(this.$route)
        
        if(!this.$route.query.id || !this.$route.query.role || !this.$route.query.comeFrom) {
            this.$router.go('-1')
        }
    },
    mounted() {
        this.dictList('TASK_TYPE')
        if (this.$route.query.comeFrom === 'TaskTable') { // 任务管理（管理端）列表
            this.getSpecialTaskinfo(this.$route.query.id)
        } else if (this.$route.query.comeFrom === 'ReportTable') { //任务管理（上传端）列表
            this.getSpecialReportinfo(this.$route.query.id)
        } else if (this.$route.query.comeFrom === 'DetailReportTable') { // 任务管理汇报详情列表（上传端）列表
            this.getTaskDetailReportDetail(this.$route.query.id)
        } else if (this.$route.query.comeFrom === 'TaskReportTable') { // 情况报告列表
            this.getSuperviseSituationDetail(this.$route.query.id)
        } else {
            this.$router.go('-1')
        }
    },
    methods: {
        // 字典查询接口
        dictList(typeCode, pItemValue) {
            this.Api.Fenlei({typeCode:typeCode, pItemValue : pItemValue}).then(res =>{
                if(res && res.code === '0') {
                    this.typeOPtions = res.data
                } else {
                    this.typeOPtions = []
                    this.$message.warning(res.message)
                }
                
            })
        },
        // 情况通报详情和数据接口调用(管理端)
        getSpecialTaskinfo(id) {
            let data = {
                id: id
            }
            this.Api.getSpecialTaskinfo(data).then(res => {
                if (res && res.code === '0') {
                    this.taskDetail = res.data
                    this.componentsArray = ['taskDetail', 'reportTable']
                } else {
                    this.taskDetail = {}
                    this.$message.warning(res.message)
                    // this.componentsArray = []
                }
            })
        },
        
        // 汇报详情查询(上传端)
        getSpecialReportinfo(id) {
            let data = {
                id: id
            }
            this.Api.getSpecialReportinfo(data).then(res => {
                if (res && res.code === '0') {
                    this.taskDetail = res.data.taskDetail
                    this.reportDetail = res.data.reportDetail
                    this.hasReportDetail = this.reportDetail && JSON.stringify(this.reportDetail) !== "{}"
                    this.isOpen = false
                    this.componentsArray = this.hasReportDetail ? ['reportDetail'] : ['taskDetail']
                } else {
                    this.taskDetail = {}
                    this.reportDetail = {}
                    this.componentsArray = []
                    this.$message.warning(res.message)
                }
            })
        },

        // 专项任务汇报详情
        getTaskDetailReportDetail(id) {
            let data = {
                id: id
            }
            this.Api.getTaskDetailReportDetail(data).then(res => {
                if (res && res.code === '0') {
                    this.taskDetail = res.data.taskDetail
                    this.reportDetail = res.data.reportDetail
                    this.hasReportDetail = this.reportDetail && JSON.stringify(this.reportDetail) !=="{}"
                    this.isOpen = false
                    this.componentsArray = this.hasReportDetail ? ['reportDetail'] : ['taskDetail']
                } else {
                    this.taskDetail = {}
                    this.reportDetail = {}
                    this.componentsArray = []
                    this.$message.warning(res.message)
                }
            })
        },
        // 
        getSuperviseSituationDetail(id) {
            let data = {
                id: id
            }
            this.Api.getSuperviseSituationDetail(data).then(res => {
                if (res && res.code === '0') {
                    this.taskDetail = res.data.taskDetail
                    this.reportDetail = res.data.reportDetail
                    this.hasReportDetail = this.reportDetail && JSON.stringify(this.reportDetail) !=="{}"
                    this.isOpen = false
                    this.componentsArray = this.hasReportDetail ? ['reportDetail'] : ['taskDetail']
                } else {
                    this.taskDetail = {}
                    this.reportDetail = {}
                    this.componentsArray = []
                    this.$message.warning(res.message)
                }
            })
        },

        // 收起和展开的切换
        toggleCards() {
            if (this.isOpen) {
                this.componentsArray = this.hasReportDetail ? ['reportDetail'] : ['taskDetail']
            } else {
                this.componentsArray = ['taskDetail', 'reportDetail']
            }
            this.isOpen = !this.isOpen
        }
    }
}
</script>
<style lang="less" scoped>
    .detailContaner{
        width: 100%;
        height: 100%;
        .tip {
            background:#fff;
            display: flex;
            padding: 20px;
            align-items: center;
            .tipLeft {
                width: 4px;
                height: 14px;
                background: #3D7fff;
                margin-right: 10px;
            }
            .tipTitle {
                font-weight: 600;
                color: #333333;
                font-size: 16px;
                line-height: 16px;
                flex: 1;
            }
            .tipButton {
                border: 1px solid #3D7FFF;
                color: #3D7FFF;
                width: 70px;
                height: 30px;
                font-weight: 500;
                border-radius: 4px;
            }
        }
    }
</style>